<template>
	<div class="vipComWrap">
		<!-- 分类栏 -->
		<div class="foot">
			<div class="none" v-if="flag">
				<div class="foot-son">
					<div
						class="foot-row"
						v-for="(titleItem, index) in courseStore.danceList"
						:key="titleItem.id"
						data-id="titleItem.id"
					>
						<div class="row-left">{{ titleItem.label }}:</div>
						<div class="row-right">
							<div
								class="row-item item"
								v-for="(item, index) in titleItem.choises"
								:key="item.id"
							>
								<span
									:class="{ row_active: item.isClick }"
									@click="changeFlags(item, titleItem.choises)"
									>{{ item.name }}</span
								>
							</div>
						</div>
						<div class="clear" @click="clear">重置</div>
					</div>
				</div>
				<div class="btn"><button @click="open">展示全部</button></div>
			</div>
			<div class="none" v-else>
				<div class="foot-sons">
					<div
						class="foot-row"
						v-for="(titleItem, index) in courseStore.danceList"
						:key="titleItem.id"
					>
						<div class="row-left">{{ titleItem.label }}:</div>
						<div class="row-right">
							<div
								class="row-item item"
								v-for="(item, index) in titleItem.choises"
								:key="item.id"
							>
								<span
									:class="{ row_active: item.isClick }"
									@click="changeFlags(item, titleItem.choises)"
									>{{ item.name }}</span
								>
								<div class="clear" @click="clear">重置</div>
							</div>
						</div>
					</div>
				</div>
				<div class="btn"><button @click="open">收起</button></div>
			</div>
		</div>
		<!-- 升序降序 -->
		<div class="allSort">
			<div class="sort">
				<div
					class="sortItem"
					:class="{ active: navId == 1 }"
					@click="changeNav(1)"
				>
					<span class="item">{{ navId == 1 ? "综合排序" : "综合" }}</span>
				</div>
				<div
					class="sortItem"
					:class="{ active: navId == 2 }"
					@click="changeNav1(2)"
				>
					<span class="item">{{ navId == 2 ? "销量由高到低" : "销量" }}</span>
				</div>
				<div
					class="sortItem"
					:class="{ active: navId == 3 }"
					@click="changeNav(3)"
				>
					<span class="item">{{
						navId == 3 ? "浏览量由高到底" : "浏览量"
					}}</span>
				</div>
				<div class="sortItem" :class="{ active: navId == 4 }">
					<el-dropdown>
						<span class="el-dropdown-link">
							价格
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<!-- <el-dropdown-item style="">价格由高到低</el-dropdown-item>
								<el-dropdown-item>价格由低到高</el-dropdown-item> -->
								<p class="sort_Item item">价格由高到低</p>
								<p class="sort_Item item">价格由低到高</p>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
				<div
					class="sortItem"
					:class="{ active: navId == 5 }"
					@click="changeNav(5)"
				>
					<span class="item"
						>{{ navId == 5 ? "发布时间由近及远" : "发布时间" }}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus"
import { ref, onMounted, watch } from "vue"
import courseStores from "../../stores/course"
import { userStore } from "../../store/lxcStore"
import { useRouter } from "vue-router"
import { ArrowDown } from "@element-plus/icons-vue"

let courseStore = courseStores()
let store = userStore()
// 获取路由地址
const router = useRouter()
const uni = router.currentRoute.value
// 定义一个分类栏标识
let flag = ref(true)
// 高亮标识
let navId = ref(1)
// 页面加载完毕时就获取数据
onMounted(async () => {
	// 判断路由地址通知pinia仓库发送不同的请求
	if (uni.fullPath === "/course/vip") {
		courseStore.getVipDanceList()
	}
	if (uni.fullPath === "/course/video") {
		courseStore.getVideoDanceList()
	}
	if (uni.fullPath === "/course/live") {
		courseStore.getLiveDanceList()
	}
})
// 点击分类栏展示全部、收起
const open = () => {
	flag.value = !flag.value
}

// 排序的高亮标识
const changeNav = (value: number) => {
	navId.value = value
}
const changeNav1 = (value: number) => {
	navId.value = value

	store.getNewCard()
}

// 点击分类栏小按钮高亮
const changeFlags = (item: any, dancesList: any, event: any) => {
	if (item.isClick) {
		item.isClick = false
		return
	}
	let result = dancesList.filter((item) => {
		return item.isClick
	})
	if (result.length > 2) {
		ElMessage("最多添加三个呦！")
		return
	}
	item.isClick = true
}
// 点击分类栏重置按钮
const clear = () => {
	courseStore.danceList.forEach((items) => {
		items.choises.forEach((item) => {
			item.isClick = false
		})
	})
}
</script>

<style scoped>
.vipComWrap {
	width: 100%;
	background-color: #eeeeee;
	overflow: hidden;
	padding: 10px 0;
}

/* 分类栏 */
.foot {
	width: 1140px;
	background-color: white;
	margin: 0 auto;
	padding: 26px 30px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.foot .clear {
	color: #f93684;
	font-size: 12px;
	position: absolute;
	top: 29px;
	right: 10px;
}

.foot-son {
	overflow: hidden;
	height: 130px;
	/* background-color: red; */
}

.foot .btn {
	position: relative;
	width: 60px;
	height: 25px;
	margin: 20px auto;
}

.foot .btn button {
	border: none;
	background-color: #fff;
	color: #f93684;
	font-size: 14px;
}

.foot-row {
	font-size: 14px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: white;
	margin-bottom: 15px;
}

.row-left {
	/* background-color: green; */
	width: 95px;
	color: #b1b5c1;
}

.row-right {
	/* background-color: #f93684; */
	width: 1045px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	color: #7d8090;
}

.row-item {
	line-height: 20px;
	margin-right: 35px;
	padding: 0 10px 15px 0;
}

.row-item .row_active {
	display: block;
	background-color: #f93684;
	color: #fff;
	border-radius: 3px;
}

#foot-s {
	cursor: pointer;
}

.allSort {
	width: 100%;
	height: 68px;
	background-color: #eee;
	padding: 20px 0;
}

.sort {
	width: 1200px;
	height: 68px;
	background-color: white;
	margin: 0 auto;
	box-sizing: border-box;
	/* display: flex; */
}

example-showcase .el-dropdown-link {
	cursor: pointer;
	color: var(--el-color-primary);
	display: flex;
	align-items: center;
}

.sortItem {
	/* width: 60px; */
	font-size: 14px;
	/* line-height: 68px; */
	display: inline-block;
	margin: 0 40px;
	padding-top: 24px;
	/* vertical-align: middle; */
}

.sort_Item {
	font-size: 14px;
	margin: 10px 20px;
}

.sort_Item:hover {
	color: #f93684;
}

.sortItem:hover {
	color: #f93684;
}

.active {
	color: #f93684;
}
.item {
	cursor: pointer;
}
</style>
